<template>
  <div class="analysis-container">
    <div class="analysis-title">{{ title }}</div>
    <div class="drug-list">
      <!-- {{ filteredDrugs }} -->
      <div v-if="selectedDrugs.length > 0" v-for="drug in selectedDrugs" :key="drug.id" class="drug-card">
        <div class="drug-info">
          <p class="drug-name">{{ drug.name }}</p>
          <p>{{ drug.type }}</p>
        </div>
        <el-tag type="success" size="mini" v-if="drug.biaoq == 0"> 可配伍 </el-tag>
        <el-tag type="danger" size="mini" v-else> 不可配 </el-tag>

      </div>
      <div v-else class="no-data">
        暂无数据
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      title: '配伍禁忌',
      selectedDrugs: []
    };
  },
  created() {
    // 假设通过路由参数传递数据
    // http://localhost:1818/#/user/analysis?ids=30,2
    this.selectedDrugs = this.$route.params.selectedDrugs || [];
  },
  mounted() {
    const drugIds = this.$route.query.ids;
    console.log(drugIds); // 输出：药品ID，用逗号隔开
    // 根据需要对这些ID进行处理，例如发送请求获取相关数据
    if (drugIds) {
      fetch(`https://i.iiiii5.cn/api/peiwu/listall?server=1&ids=${encodeURIComponent(drugIds)}`)
        .then(response => response.json())
        .then(res => {
          this.selectedDrugs = res.data;
          // this.title = res.title + '的' + '配伍禁忌'
          console.log(res); // 处理返回的数据
        })
        .catch(error => console.error('Error:', error));
    }
  }
};
</script>
  
<style scoped>
.analysis-container {
  padding: 20px;
  
}

.analysis-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.drug-list {
  padding: 0 15px;
  min-height: 650px;
}

.drug-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  /* background: #fff; */
  /* border-radius: 8px; */

  /* margin-bottom: 10px; */
  /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
  border-bottom: #eee 1px solid;
}

.drug-name {
  font-size: 1rem;
}

.add-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  border: none;
  font-size: 24px;
  line-height: 40px;
}

.tags {
  display: flex;
  gap: 10px;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #888;
  height: 650px;
}</style>
  